<template>
    <div class="box">
        <div class="container">
        <ul>
            <li v-for="(data,index) in list.classPartVos" :key="index">
                <div class="left"><img src="img/biaozhi.png" alt=""><div class="line"></div></div>
                <div class="right">
                    <div class="time">{{data.startTime}}-{{data.endTime}}</div>
                    <div class="message">
                        <div class="top">{{data.partName}}</div>
                        <div class="middle">
                            <div class="title" v-if="data.textName != null" @click="watchWord(data.textFile)"><img src="img/wendang.png" alt=""><span>点击查看文字教案</span></div>
                            <div class="video">
                                <img src="img/shipinkaobei.png" v-for="(item,value) in data.materialVos" :key="value" @click="videoPush(item.videoFile,data.partId)" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
        <!-- 优秀备课视频 -->
        <div class="goodVideo">
            <div class="video-top">
                <div class="left"><img src="img/ganggang@2x.png" alt=""><span>优秀备课视频</span></div>
                <div class="right"><span>更多视频</span><van-icon name="arrow" /></div>
            </div>
            <div class="video-box">
                <img @click="pushExtraVideo" src="img/shipinkaobei.png" alt="">
            </div>
        </div>
        <!-- 评论 -->
        <div class="comment">
            <div class="video-top">
                <div class="left"><img src="img/ganggang@2x.png" alt=""><span>评论</span><span class="num">(20)</span></div>
            </div>
            <div class="com_box">
                <div class="left"><img src="img/datouxiang33@2x.png" alt=""></div>
                <div class="right"><p><span>房建人：</span>哈哈哈哈</p></div>
            </div>
        </div>
        <!-- 悬浮框 -->
        <div @click="show = true" class="float">
            <img src="img/xuanfuqiu.png" alt="">
        </div>
        <van-popup round position="bottom" v-model="show">
            <van-picker
                show-toolbar
                :columns="columns"
                @cancel="show = false"
                @confirm="onConfirm"
            />
        </van-popup>
        <!-- 顶部齿轮 -->
        <!-- <div class="chilun">
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>: 
            <div class="img"><img src="img/chilinzi.png" alt=""><span>00</span></div>
        </div> -->
        </div>
        <footer>
            <input type="text" placeholder="写评论"><img src="img/xiaoxi12x.png" alt="">
        </footer>
    </div>
</template>
<script>
import { ImagePreview } from 'vant';
export default {
    data() {
        return {
            show:false,
            columns: ['视频','文档','图片'],
            id:'',
            list:[],
            imageBox:[]
        }
    },
    mounted() {
        this.id = this.$route.query.id;
        
        (async ()=>{
            const data = await this.get('/course/showClasspartAndClassMenu',{classPartId:this.id}); 
            this.list = data.data;
            if(this.list.classMenus.some(item=>item.classmenuType == '图片')){
                let arr = this.list.classMenus.filter(item=>item.classmenuType == '图片')[0].menuFiles;
                console.log(arr);
            }
            this.columns = this.list.classMenus.map(item=>{
                return {
                    ...item,
                    text:item.classmenuName
                }
            });
            // this.imageBox
        })()
    },
    methods: {
        onConfirm(index,value){
            this.show = false;
            console.log(index);
            // return;
            if(index.classmenuType == '文档'){
                this.watchWord(index.menuFiles[0].fileName)
            }else if(index.classmenuType == '图片'){
                ImagePreview(['https://img.yzcdn.cn/vant/apple-1.jpg']);
            }
        },
        watchWord(url){
            this.$router.push({
                path:'/pdf',
                query:{
                    url
                }
            })
        },
        videoPush(url,id){
            this.$router.push({
                path:'/video',
                query:{
                    url,
                    id
                }
            })
        },
        pushExtraVideo(){
            this.$router.push({
                path:'/extravideo'
            })
        }
    },
}
</script>
<style lang="scss" scoped>
input{
    -webkit-appearance: none;
}
    .box{
        background: #F7F9FA;
        height: 100%;
        display: flex;
        flex-direction: column;
        .container{
            flex: 1;
            overflow: scroll;
        }
    }
    footer{
        width: 100%;
        padding: 0.17rem 0.24rem;
        box-sizing: border-box;
        align-items: center;
        display: flex;
        border-top: 0.01rem solid #eee;
        background: white;
        // height: 0.9rem;
        input{
            width: 6.36rem;
            // height: 56px;
            background: #FFFFFF;
            border: 0.01rem solid #AFAFAF;
            border-radius: 0.08rem;
            padding: 0.15rem;
            box-sizing: border-box;
            font-size: 0.26rem;
        }
        img{
            width: 0.4rem;
            height: 0.36rem;
            margin-left: 0.25rem;
        }
    }
    .float{
        width: 0.8rem;
        height: 0.8rem;
        position: fixed;
        right: 0.5rem;
        bottom: 1rem;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .chilun{
        position: fixed;
        top: 0.2rem;
        right: 0.24rem;
        display: flex;
        align-items: center;
       font-size: 0.16rem;
       .img{
           position: relative;
       }
        img{
            width: 0.54rem;
            height: 0.54rem;
        }
        span{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }
    }
    ul{
        padding: 0.2rem;
        box-sizing: border-box;
        li{
            display: flex;
            margin-top: 0.2rem;
            .left{
                display: flex;
                flex-direction: column;
                align-items: center;
                img{
                    width: 0.26rem;
                    height:0.26rem;
                }
                .line{
                    width: 0.01rem;
                    background: #CFCFCF;
                    height: 100%;
                    margin-top: 0.05rem;
                }
            }
            
            .right{
                margin-left: 0.1rem;
                width: 100%;
                .time{                  
                    font-size: 0.28rem;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #343434;
                }
                .message{
                    margin-top: 0.2rem;
                    background: white;
                    padding: 0.2rem;
                    box-sizing: border-box;
                    width: 100%;
                    .top{
                        font-size: 0.3rem;
                        font-family: PingFang SC;
                        font-weight: 500;
                        color: #343434;
                        padding-bottom: 0.2rem;
                        box-sizing: border-box;
                        border-bottom: 0.01rem solid #F2F2F2;
                    }
                    .middle{
                        margin-top: 0.2rem;
                        .title{
                            display: flex;
                            align-items: center;
                            img{
                                width: 0.26rem;
                                height: 0.26rem;
                            }
                            span{
                                margin-left: 0.08rem;
                                font-size: 0.26rem;
                                font-family: PingFang SC;
                                font-weight: 400;
                                color: #2E9EFF;
                            }
                        }
                        .video{
                            margin-top: 0.2rem;
                            display: flex;
                            img{
                                width: 1rem;
                                height: 1rem;
                                margin-right: 0.16rem;
                            }
                        }
                    }
                }
            }
        }
    }
.goodVideo{
    padding: 0.25rem;
    box-sizing: border-box;
    background: white;
    
    .video-box{
        display: flex;
        align-items: center;
        margin-left: 0.24rem;
        margin-top: 0.3rem;
        img{
            width: 1.1rem;
            height: 1.1rem;
        }
    }
}
.video-top{
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 0.25rem;
        border-bottom: 0.01rem solid #eeeeee;
        .left{
            display: flex;
            align-items: center;
            img{
                width: 0.03rem;
                height: 0.3rem;
            }
            span{
                font-size: 0.3rem;
                font-family: PingFang SC;
                font-weight: 500;
                color: #333333;
                margin-left: 0.1rem;
            }
        }
        .right{
            font-size: 0.24rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #7E7E7E;
            align-items: center;    
            span{
                margin-right: 0.1rem;
            }
        }
    }
.comment{
    padding: 0.25rem;
    box-sizing: border-box;
    background: white;
    margin-top: 0.2rem;
    min-height: 6rem;
    .num{
        margin-left: 0.1rem;
    }
}
.com_box{
    margin-top: 0.2rem;
    display: flex;
    .left{
         width: 0.7rem;
            height: 0.7rem;
        img{
            width: 0.7rem;
            height: 0.7rem;
            vertical-align: top;
        }
        

    }
    .right{
        margin-left: 0.1rem;
        margin-top: 0.2rem;
        p{
            font-size: 0.26rem;
            font-family: PingFang SC;
            font-weight: 400;
            color: #333333;
            span{
                color: #2D9DFF;
            }
        }
    }
}
</style>